<template>
  <div class="CalculationProperties">
    <h1>计算属性：</h1>

    <span>商品数量：</span>
    <el-input v-model="count" placeholder="请输入内容"></el-input>
    <span>商品单价：</span>
    <el-input v-model="unitPrice" placeholder="请输入内容"></el-input>

    <h2>方法一、通过方法计算</h2>
    <h2>商品总价：{{totalPrice()}} 元</h2>

    <h2>方法二、简单的计算属性</h2>
    <h2>商品总价：{{totalPriceOne}} 元</h2>

    <h2>方法三、复杂的计算属性</h2>
    <h2>商品总价：{{totalPriceOne}} 元</h2>

    <h2>方法四、计算属性和method区别</h2>
    <h2>商品总价：{{totalPriceOne}} 元</h2>
    <h2>商品总价：{{totalPriceOne}} 元</h2>
    <h2>商品总价：{{totalPriceOne}} 元</h2>

    <h2>商品总价：{{totalPrice()}} 元</h2>
    <h2>商品总价：{{totalPrice()}} 元</h2>
    <h2>商品总价：{{totalPrice()}} 元</h2>

  </div>
</template>

<script>
export default {
  name: 'calculationProperties',
  data () {
    return {
      msg: '计算属性',
      count: 10,
      unitPrice: 24
    }
  },

  methods: {
    totalPrice () {
      console.log(11111)
      return this.count * this.unitPrice
    }
  },

  computed: {
    totalPriceOne () {
      console.log(222222)
      return this.count * this.unitPrice
    },

    fullName: {
      // getter
      get: function () {
        console.log("get")
        return this.count * this.unitPrice
      },
      // setter
      set: function (value) {
        console.log("set")
        this.count = value
        this.unitPrice = value
      }
    }
  },
  //   mounted () {
  //     this.fullName = '20'

  //   }
}
</script>


<style scoped>
</style>
